<template>
	<view class="container">
		<!-- 遮罩层 -->
		<view class="mask" v-show="isMaskShow" @click="removeMask"></view>
		<!-- 弹出层 -->
		<view class="popUp" v-show="isMaskShow">
			<view v-show="xmgsShow">
				<view class="title" style="margin-top: 10px;">项目归属</view>
				<view class="content_one">
					<view class="box1" :class="{boxAct:index==gclassIndex}" v-for="(item,index) in xianjiList" 
					:key="index" @click="chooseGuishu(item,index)">
						{{item.text}}
					</view>
				</view>
			</view>
			<view v-show="sslyShow">
				<view class="title" style="margin-top: 10px;">所属领域</view>
				<view class="content_one">
					<view class="box1" :class="{boxAct:index==lyclassIndex}" v-for="(item,index) in childrenList" 
					:key="index" @click="chooseLingyu(item,index)">
						{{item.text}}
					</view>
				</view>
				<view class="secondary" v-show="ejlyShow">
					<view class="content_one">
						<view class="box1" :class="{boxAct:index==lySecIndex}" v-for="(item,index) in lySecList" 
						:key="index" :data-children="item.children" @click="chooselySec(item,index)">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">项目阶段</view>
		<view class="content_one">
			<view class="box1" :class="{boxAct:index==currentIndex}" v-for="(item,index) in jieduanList" 
			:key="index" @click="clickBox(item,index)" :data-id="item.value">
				{{item.name}}
			</view>
		</view>
		<view class="title" style="margin-top: 10px;">项目归属</view>
		<view class="content_one">
			<view class="box1" :class="{boxAct:index==guishuIndex}" v-for="(guishuItem,index) in guishuList" 
			:data-val="guishuItem.id" :key="index" @click="clickGuishu(guishuItem,index)">
				{{guishuItem.text}}
			</view>
		</view>
		<view class="title" style="margin-top: 10px;">项目所属领域</view>
		<view class="content_one">
			<view class="box1" :class="{boxAct:index==lingyuIndex}" v-for="(lingyuItem,index) in lingyuList" 
			:key="index" @click="clickLingyu(lingyuItem,index)">
				{{lingyuItem.text}}
			</view>
		</view>
		<view class="shaixuanFooter">
			<view class="footOne" @click="replacement">重置</view>
			<view class="footOne" @click="sure">确定</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				currentIndex:-1,
				guishuIndex:-1,
				lingyuIndex:-1,
				//addressIndex:0,
				jieduanList:[],
				guishuList:[
					{id:"402886574fa5866e014fa5e179340013",text:"长沙市"},
					{id:"402886574fa5866e014fa5e2059a0014",text:"株洲市"},
					{id:"402886574fa5866e014fa5e2337d0015",text:"湘潭市"},
					{id:"2c9080d810590c8e01105cf4ec02000c",text:"衡阳市"},
					{id:"2c9080d851433649015146a539b40030",text:"邵阳市"},
					{id:"2c9080d851433649015146a3a13a0025",text:"岳阳市"},
					{id:"2c9080d810590c8e01105cf52e76000e",text:"常德市"},
					{id:"2c9080d810590c8e01105cf6836d0016",text:"张家界市"},
					{id:"2c9080d810590c8e01105cf50eed000d",text:"益阳市"},
					{id:"2c9080d810590c8e01105cf6003c0012",text:"郴州市"},
					{id:"2c9080d85146aa24015146b3e9900009",text:"永州市"},
					{id:"2c9080d810590c8e01105cf665d40015",text:"怀化市"},
					{id:"2c9080d810590c8e01105cf622a40013",text:"娄底市"},
					{id:"2c9080d810590c8e01105cf6a0660017",text:"湘西自治州"}
				],
				lingyuList:[
					{id:"C002",text:"基础设施项目"},
					{id:"C003",text:"生态环保"},
					{id:"C004",text:"社会民生"},
					{id:"C001",text:"产业发展"},
					{id:"C005",text:"房地产"}
				],
				isMaskShow:false,
				xmgsShow:false,
				sslyShow:false,
				xianjiList:[],
				gclassIndex:-1,
				lyclassIndex:-1,
				lySecIndex:-1,
				lySecList:[],
				childrenList:[],
				ejlyShow:false,
				industryId:"",
				backData:[
					{jieduanText:"",jieduanId:""},
					{guishuText:"",guishuId:""},
					{lingyuText:"",lingyuId:""}
				]
				
			}
		},
		onLoad() {
			this.jieduanFun();
			//this.guishuFun();
			//this.lingyuFun();
			uni.showLoading({
				title:"加载中……"
			})
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		},
		methods:{
			//项目阶段
			jieduanFun(){
				this.$http.get("/sys/v1/dict.do?code=buildPropertyId",{
					params:""
				}).then(res=>{
					console.log(res)
					this.jieduanList = res.data;
					this.jieduanList = this.jieduanList.map((item)=>{
						return{
							name:item.name,
							value:item.value
						}
					})
				})
			},
			//点击项目阶段
			clickBox(data,index){
				this.currentIndex = index;
				this.backData.jieduanText = data.name;
				this.backData.jieduanId = data.value;
				uni.showToast({
					title:"您选择了"+this.backData.jieduanText,
					icon:"none"
				})
			},
			
			//项目归属
			guishuFun(){
				this.$http.get("/sys/v1/getProaddTree.do?year=2021",{
					params:""
				}).then(res=>{
					this.guishuList = res.data[0].children;
					this.guishuList = this.guishuList.map((item)=>{
						return{
							text : item.text,
							id:item.id,
							children:item.children
						}
						
					})
				})
			},
			//所属领域
			lingyuFun(){
				this.$http.get("/sys/v1/getIndustryTree.do?year=2021&industryId=",{
					params:""
				}).then(res=>{
					console.log(res);
					this.lingyuList = res.data;
					this.lingyuList = this.lingyuList.map((item)=>{
						return{
							text:item.text,
							id:item.id
						}
					})
				})
			},
			//点击项目归属出弹框
			clickGuishu(data,index){
				this.guishuIndex = index;
				this.industryId = data.id;
				this.$http.get("/sys/v1/getProaddTree.do?year=2021&industryId="+this.industryId,{
					params:""
				}).then(res=>{
					this.isMaskShow = true;
					this.xmgsShow = true;
					this.xianjiList = res.data;
					let allObj = {"id":1,"text":"全部"};
					this.xianjiList.unshift(allObj);
					this.xianjiList = this.xianjiList.map((item)=>{
						return{
							text : item.text,
							id:item.id,
							children:item.children
						}
					});
					this.gclassIndex = -1;
				})
			},
			//点击弹框里的二级归属
			chooseGuishu(data,index){
				this.gclassIndex = index;
				this.backData.guishuText = data.text;
				this.backData.guishuId = data.id;
				if(data.id == 1){
					this.backData.guishuId = this.industryId;
				}
				console.log(data);
				console.log(this.backData.guishuId);
				setTimeout(()=>{
					this.xmgsShow = false;
					this.isMaskShow = false;
				},1000)
				uni.showToast({
					title:"您选择了"+this.backData.guishuText,
					icon:"none"
				})
			},
			//点击所属领域
			clickLingyu(data,index){
				this.lingyuIndex = index;
				let industryId = data.id;
				let lingyuText = data.text;
				this.$http.get("/sys/v1/getIndustryTree.do?year=2021&industryId="+industryId,{
					params:""
				}).then(res=>{
					this.isMaskShow = true;
					this.sslyShow = true;
					this.childrenList = res.data;
					if(res.data>0){
						this.childrenList = this.childrenList.map((item)=>{
							return{
								id:item.id,
								text:item.text,
								children:item.children
							}
						})
					}else{
						this.backData.lingyuText = lingyuText;
						this.backData.lingyuId = industryId;
						uni.showToast({
							title:"您选择了"+this.backData.lingyuText,
							icon:"none"
						});
					}
				})
			},
			//点击二级所属领域
			chooseLingyu(data,index){
				//debugger;
				this.lyclassIndex = index;
				this.backData.lingyuText = data.text;
				this.backData.lingyuId = data.id;
				if(data.children!=false){
					this.ejlyShow = true;
					this.lySecList = data.children;
					this.lySecList = this.lySecList.map((item)=>{
						return{
							id:item.id,
							text:item.text
						}
					})
				}else{
					setTimeout(()=>{
						this.sslyShow = false;
						this.isMaskShow = false;
					},1000);
					uni.showToast({
						title:"您选择了"+this.backData.lingyuText,
						icon:"none"
					});
				}
			},
			//三级所属领域
			chooselySec(data,index){
				this.lySecIndex = index;
				this.lingyuText = data.text;
				this.lingyuId = data.value;
				setTimeout(()=>{
						this.sslyShow = false;
						this.isMaskShow = false;
					},1000);
					uni.showToast({
						title:"您选择了"+this.lingyuText,
						icon:"none"
					});
				
			},
			
			removeMask(){
				this.sslyShow = false;
				this.isMaskShow = false;
				this.xmgsShow = false
			},
			//点击重置按钮
			replacement(){
				this.guishuIndex=-1;
				this.currentIndex = -1;
				this.lingyuIndex = -1;
			},
			//点击确定按钮
			sure(){
				let backData = this.backData;
				console.log(this.backData);
				// 获取页面栈
				let pages = getCurrentPages()
				// 获取上一页栈
				let prevPage = pages[ pages.length - 2 ]
				// 触发上一页 upData 函数(并携带参数)
				prevPage.$vm.upData(this.backData)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page{
		font-family: "my-font";
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000000;
		opacity: 0.3;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.popUp{
		width: 100%;
		/* padding: 20px; */
		box-sizing: border-box;
		height: 450px;
		position: fixed;
		top: 100px;
		left: 0;
		background-color: #fff;
		z-index: 110;
	}
	.secondary{
		width: 100%;
		border-top: solid #DEDEDE 2px;
		margin-top: 15px;
		padding-top: 10px;
	}
	.container{
		width: 100%;
		/* padding: 20px; */
		box-sizing: border-box;
	}
	.title{
		color: #0B121A;
		font-size: 16px;
		font-weight: bold;
		padding: 20px;
	}
	.content_one{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.box1{
		width: 100px;
		height: 34px;
		line-height: 34px;
		color: #28435D;
		background-color: #EDEDED;
		text-align: center;
		margin-top: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-radius: 6px;
		margin-left:17px;
		/* margin-right: 17px; */
	}
	
	.boxAct{
		background-color: #E5EEFF;
		color: #3D84FE;
	}
	.shaixuanFooter{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0px;
		left: 0px;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.footOne{
		width: 46%;
		height: 41px;
		text-align: center;
		line-height: 41px;
		color: #28435D;
		font-size: 14px;
		border: solid #3D84FE 1px;
		border-radius: 5px;
	}
	.footOne:nth-child(2){
		background-color: #3D84FE;
		color: #fff;
	}
</style>
